<template>
  <div>
    <el-tabs style="margin-top: 10px" tab-position="top">
      <!-- <el-tab-pane label="样品基本参数"> -->
      <el-card>
        <el-table ref="tableName" :data="parameterList" height="500px" style="margin: 10px 0 10px" border :header-cell-style="{ background: '#FAFAFA' }">
          <el-table-column align="center" type="index"></el-table-column>
          <el-table-column align="center" label="牌号" prop="grade" width="120px"></el-table-column>
          <el-table-column align="center" label="国别" prop="country"></el-table-column>
          <el-table-column align="center" label="生产商" prop="manufacturer" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="数据类型" prop="dataType" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="样品规格" prop="specification" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="执行标准" prop="standard" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="标称密度/(kg/m³)" width="140px" prop="nominalDensity" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="电导率/(S/m)" width="120px" prop="specificConductance" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="热导率/(W/m.K)" width="140px" prop="heatConductivity" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="屈服强度/MPa" width="120px" prop="yieldStrength" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="入库日期" prop="inDate" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="样品柜编号" width="100px" prop="cabinetNumber" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="项目组" prop="projuctGroup" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="样品提供人" width="100px" prop="sampleProducer" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="上传人员" width="100px" prop="username" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="备注" prop="remarks" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="数据来源" width="200px" prop="dataSource" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click.native.stop="downloadAttachment(scope.row)">{{ scope.row.dataSource }}</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" fixed="right" width="250px">
          <!-- <el-table-column align="center" label="操作" fixed="right" width="300px"> -->
            <template slot-scope="scope">
              <el-button type="text" @click.native.stop="edit(scope.row)" size="mini">编辑</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button type="text" style="color:green" @click.native.stop="passData(scope.row)" size="mini">通过</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button type="text" style="color:red" @click.native.stop="rejectData(scope.row)" size="mini">不通过</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button @click="openMeasurementConditions(scope.row)" style="color:gray" type="text" size="mini">查看具体信息</el-button>
              <!-- <el-divider direction="vertical"></el-divider>
              <el-button @click="downloadFile" style="color:black" type="text" size="mini">文件下载</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[10, 20]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
      </el-card>
    </el-tabs>

    <el-dialog title="请输入通过原因" :visible.sync="approveVisible" width="50%">
      <el-input type="textarea" v-model="approveMessage" :rows="4" placeholder="请输入通过原因" style="width: 70%; margin-left: 40px"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="approveVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendApprove()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="请输入不通过原因" :visible.sync="disapproveVisible" width="50%">
      <el-input type="textarea" v-model="disapproveMessage" :rows="4" placeholder="请输入不通过原因" style="width: 70%; margin-left: 40px"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="disapproveVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendDisapprove()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑弹窗 -->
    <edit ref="edit" :importDataType="'导电性能'" @editSuccess="loadData"></edit>
    <!-- 编辑弹窗 -->

    <!-- 测量条件与测量列表 -->
    <el-dialog title="查询具体信息" :visible.sync="querySpecificInfoType" width="80%" :show-close="false" :close-on-click-modal="false">
      <measureSelectAndEchart ref="measureSelectAndEchart" :importDataType="'导电性能'" :conditionNum="conditionNum"></measureSelectAndEchart>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" size="small" style="margin-right: 20px" @click="closeQuery()">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 测量条件与测量列表 -->
  </div>
</template>

<script>
import { f_postAction } from '../../api/fileCheckApi'
import { f_httpAction } from '../../api/fileCheckApi'
import { Message } from 'element-ui'
import measureSelectAndEchart from './components/measureSelectAndEchart.vue'
import edit from './components/edit.vue'
export default {
  components: {
    measureSelectAndEchart,
    edit
  },
  data() {
    return {
      /***********编辑相关数据*********** */
      editVisible: false,
      editRow: {},
      columnTitle: [],
      /***********编辑相关数据*********** */

      /***********测量条件与测量列表*********** */
      conditionInfo: {
        curveTypes: '',
        timeTypes: '',
        productId: ''
      },
      conditionNum: {},
      querySpecificInfoType: false,
      /***********测量条件与测量列表*********** */

      approveMessage: '',
      disapproveMessage: '',
      passId: '',
      rejectId: '',
      approveVisible: false,
      disapproveVisible: false,

      parameterList: [],

      //基本参数分页
      queryInfo: {
        //当前的页数
        pageNum: 1,
        //当前每页显示多少条数据
        pageSize: 10,
        type: '导电样品基本参数',
        productId: ''
      },
      total: 0
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    downloadAttachment(row) {
      this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: '/attachmentUpload/downLoadAttachmentFile',
        method: 'GET',
        params: {
          filename: row.dataSource
        },
        responseType: 'blob' // 表明返回服务器返回的数据类型
      }).then(res => {
        let blob = new Blob([res.data])
        let fileName = row.dataSource
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName)
        } else {
          var link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = fileName
          link.click()
          //释放内存
          window.URL.revokeObjectURL(link.href)
        }
      })
    },
    /***********编辑相关函数*********** */
    edit(row) {
      this.editRow = row

      //通过ref获取el-table的表头数据
      this.columnTitle = this.$refs.tableName.$children
        .filter(x => {
          return x._props.prop !== undefined
        })
        .map(x => {
          return new Object({
            prop: x._props.prop,
            label: x._props.label
          })
        })
      this.editVisible = true
      this.$refs.edit.getEditRowAndColumn(row, this.columnTitle, this.editVisible)
    },
    /***********编辑相关函数*********** */

    sendApprove() {
      this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: '/admin/CheckPass',
        method: 'POST',
        data: {
          id: this.passId,
          type: '导电样品基本参数',
          message: this.approveMessage
        }
      }).then(res => {
        if (res.data.result.code == 200) {
          Message({
            message: res.data.result.message,
            type: 'success',
            center: true,
            customClass: 'mzindex'
          })
          this.approveVisible = false
          this.loadData()
        }
      })
    },
    sendDisapprove() {
      this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: '/admin/noCheckPass',
        method: 'POST',
        data: {
          id: this.rejectId,
          type: '导电样品基本参数',
          message: this.disapproveMessage
        }
      }).then(res => {
        if (res.data.result.code == 200) {
          Message({
            message: res.data.result.message,
            type: 'success',
            center: true,
            customClass: 'mzindex'
          })
          this.disapproveVisible = false
          this.loadData()
        }
      })
    },
    passData(row) {
      this.approveVisible = true
      this.passId = row.id
    },
    rejectData(row) {
      this.disapproveVisible = true
      this.rejectId = row.id
    },
    //页码改变
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.loadData()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage
      this.loadData()
    },

    //获取基本参数
    loadData() {
      this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: '/checkTable/selectParameter',
        method: 'POST',
        data: this.queryInfo
      }).then(res => {
        this.parameterList = res.data.result.unCheckData.records
        this.total = res.data.result.unCheckData.total
      })
    },
    closeQuery() {
      this.querySpecificInfoType = false
    },
    openMeasurementConditions(row) {
      this.querySpecificInfoType = true
      this.axios({
        //获取数量
        baseURL: 'http://59.172.104.174:30669',
        url: `/eleMeasurement/selectNum?id=${row.id}`,
        methods: 'GET'
      }).then(res => {
        this.conditionNum = res.data.result
        this.conditionInfo.productId = row.id
        this.$refs.measureSelectAndEchart.getDataFromUp(this.conditionInfo, row.specification)
      })
    },
    downloadFile() {

    }
  }
}
</script>

<style scoped></style>
